<template>
  <div class="attention-fans">
    <m-header title="关注" :left-options="{showBack: false}">
      <!-- <img class="rximg" slot="right" src="../../assets/imgs/icon-search@2x.png" @click="$router.push({path: '/attention/search'})" alt=""> -->
    </m-header>
    <tab class="custom-tabnav" custom-bar-width="1rem">
      <tab-item v-for="(item, index) in tabList" :key="index"
        :selected="tabIndex===index" @on-item-click="handleTabClick">{{item}}</tab-item>
    </tab>
    <div class="attention-model">
      <component :is="currentView[tabIndex]"></component>
    </div>
  </div>
</template>
<script>
import Attention from './Attention';
import Fans from './Fans';

export default {
  components: {
    Attention,
    Fans
  },
  data () {
    return {
      tabIndex: 0,
      currentView: [Attention, Fans],
      tabList: ['关注', '粉丝']
    }
  },
  created () {
    this.tabIndex = this.$route.query.type * 1 || 0;
  },
  methods: {
    handleTabClick (index) {
      this.tabIndex = index;
      this.$router.replace({name: 'Attention', query: { type: index }});
    }
  }
}
</script>
<style lang="less" scoped>
  .attention-fans {
    .custom-tabnav {
      position: fixed;
      top: 0.92rem;
      width: 100%;
      z-index: 1000;
    }
    .attention-model {
      position: absolute;
      width: 100%;
      top: 1.72rem;
      bottom: 0.98rem;
      background: #f7f7f7;
      overflow-y: scroll;
    }
  }

</style>
